<template>
  <div class="user">
     <SearchHead btnTitle="添加用户" searchTitle="请输入用户昵称" @btnClick="addUserHandler" @onSearch="searchHandler"></SearchHead>
     <List :list="list" :listProp="listProp" @btnClick="emitOrDeleteHandler"></List>
     <Pagination @pageChange="updateUserList" :total="total"></Pagination>

     <!-- 添加用户抽屉盒子 -->
     <el-drawer
     :title="UserForm.username ? '编辑用户' : '添加用户'"
     :visible.sync="isShowDrawer"
     >
     <div class="item">
      <p>昵称:</p>
      <el-input v-model="UserForm.nickname" placeholder="请输入昵称"></el-input>
     </div>
     <div class="item">
      <p>账号:</p>
      <el-input v-model="UserForm.username" placeholder="请输入账号"></el-input>
     </div>
     <div class="item">
      <p>密码:</p>
      <el-input v-model="UserForm.password" placeholder="请输入密码"></el-input>
     </div>
     <div class="item">
      <p>权限:</p>
      <el-select v-model="UserForm.role" placeholder="请选择权限">
        <el-option label="管理员" value="管理员"></el-option>
        <el-option label="普通用户" value="普通用户"></el-option>
      </el-select>
     </div>
       <div class="btnBox">
         <el-button type="success" size="large" @click="submit">提交</el-button>
       </div>
     </el-drawer>
  </div>
</template>

<script>
import SearchHead from '../../../components/admin/SearchHead.vue'
import List from '../../../components/admin/List.vue'
import Pagination from '../../../components/admin/Pagination.vue'
// import { Loading } from 'element-ui'


  export default {
    components:{
      SearchHead,
      List,
      Pagination,
    },
    data() {
      return {
        total:0,
        addOrEdit:'add',
        isShowDrawer:false,
        UserForm:{
          nickname:'',
          username:'',
          password:'',
          role:'普通用户'
        },
         listProp:[
          { label:'昵称',prop:'nickname' },
          { label:'账号',prop:'username'},
          { label:'密码',prop:'password'},
          { label:'权限',prop:'role'},
        ],
        list:[]
      }
    },
    methods: {
      // 模糊查询操作
     async searchHandler(val){
     if(val){
         const { status,data } = await this.$http.get('/userQueryAndNickname?nickname=' + val)
           if(status!=200) return this.$message.error(data.msg)
          this.list=data.userList
     }else{
      this.getData()
     }
      },
      // 删除或者修改操作
      emitOrDeleteHandler(type,row){
        if(type=='delete'){
          // 执行删除用户
           this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          type: 'warning'
        }).then(async () => {
          const { status,data } = await this.$http.delete('/userDelete?id=' + row._id)
           if(status!=200) return this.$message.error(data.msg)
           this.$message.success(data.msg)
           this.getData()
        }).catch(() => {
        });
        }else{
          this.addOrEdit='edit'
          // 执行编辑用户
          this.isShowDrawer=true
          // 动态绑定 地址一样,不能直接赋值  要进行深拷贝
          this.UserForm=JSON.parse(JSON.stringify(row))
        }
      },

      // 添加用户
      addUserHandler(){
        this.addOrEdit='add'
        this.UserForm={
        nickname:'',
        username:'',
        password:'',
        role:'普通用户'
      }
        this.isShowDrawer=true
      },
       async submit(){
        if(this.addOrEdit==='add'){
          // 执行添加
      const { status,data } = await this.$http.post('/userRegister',this.UserForm)
      if(status!=200) return this.$message.error(data.msg)
      this.isShowDrawer = false
      // 重新获取最新数据
      this.getData()
      // 还原表单数据
      this.UserForm={
        nickname:'',
        username:'',
        password:'',
        role:'普通用户'
      }
    }else{
      // 修改用户
      const { status,data } = await this.$http.put('/userModify',this.UserForm)
      if(status!=200) return this.$message.error(data.msg)
      this.isShowDrawer = false
      // 重新获取最新数据
      this.getData()
      // 还原表单数据
      this.UserForm={
        nickname:'',
        username:'',
        password:'',
        role:'普通用户'
      }
     }
     
    },
    // 获取页面数据的封装
    async getData(page=1){
      const { status,data} = await this.$http.get('/getUserList?page='+page)
      if(status!=200) return this.$message.error(data.msg)
      this.list = data.userList
      this.total=data.total
    },
    updateUserList(page){
    this.getData(page)
    }

    },
    // 利用生命周期钩子,  最后获取数据渲染到页面上
    created() {
      this.getData()
    },
  }
  // console.log(data.userList);
</script>

<style lang="less" scoped>
.el-drawer__body>* {
  padding: 0 40px !important;
  p{
    margin: 10px 0;
  }
}
</style>